<template>
  <div class="keyboard-wrapper">
<!--    <input-->
<!--      type="text"-->
<!--      v-model="NUM"-->
<!--      @focus="show = true"-->
<!--      onfocus="this.blur()"-->
<!--    />-->
<!--    <el-input :rows="1" class="shaoinput"-->
<!--      placeholder="手牌号"-->
<!--      v-model="NUM" type="textarea" resize="none"-->
<!--      @focus="show = true"-->
<!--      >-->
<!--    </el-input>-->
    <div class="shaokeyboard" >
      <div class="num">

       <el-card  style="width: 100%; border-radius: 20px;" shadow="always" >
         <div class="left">
         <el-row :gutter="10">
           <el-col :span="7.5">
         <el-button type="danger" plain round  @click="change(1)"
                    :class="[active === 1 ? 'active' : '']"
                    @touchstart="msDown(1)"
                    @touchend="msUp(1)"
                    style="height: 100px;width: 290px;margin-top: 3px;padding: 0;font-size: 40px;">1</el-button>
           </el-col>
             <el-col :span="7.5">
         <el-button type="danger"  plain round @click="change(2)"
                    :class="[active === 2 ? 'active' : '']"
                    @touchstart="msDown(2)"
                    @touchend="msUp(2)"
                    style="height: 100px;width: 290px;margin-top: 3px;padding: 0;font-size: 40px">2</el-button>
             </el-col>
           <el-col :span="7.5">
         <el-button type="danger" plain round   @click="change(3)"
                    :class="[active === 3 ? 'active' : '']"
                    @touchstart="msDown(3)"
                    @touchend="msUp(3)"
                    style="height: 100px;width: 290px;margin-top: 3px;padding: 0;font-size: 40px">3</el-button>
           </el-col>
<!--           <el-col :span="6">-->


<!--           </el-col>-->
         </el-row>
         <el-row :gutter="10">
           <el-col :span="7.5">
         <el-button type="danger"  plain round   @click="change(4)"
                    :class="[active === 4 ? 'active' : '']"
                    @touchstart="msDown(4)"
                    @touchend="msUp(4)"
                    style="height: 100px;width: 290px;margin-top: 8px;padding: 0;font-size: 40px">4</el-button>
           </el-col>
           <el-col :span="7.5">
         <el-button type="danger" plain round @click="change(5)"
                    :class="[active === 5 ? 'active' : '']"
                    @touchstart="msDown(5)"
                    @touchend="msUp(5)"
                    style="height: 100px;width: 290px;margin-top: 8px;padding: 0;font-size: 40px">5</el-button>
           </el-col>
           <el-col :span="7.5">
         <el-button type="danger" plain round  @click="change(6)"
                    :class="[active === 6 ? 'active' : '']"
                    @touchstart="msDown(6)"
                    @touchend="msUp(6)"
                    style="height: 100px;width: 290px;margin-top: 8px;padding: 0;font-size: 40px">6</el-button>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="7.5">
         <el-button type="danger" plain round  @click="change(7)"
                    :class="[active === 7 ? 'active' : '']"
                    @touchstart="msDown(7)"
                    @touchend="msUp(7)"
                    style="height: 100px;width: 290px;margin-top: 8px;padding: 0;font-size: 40px">7</el-button>
           </el-col>
           <el-col :span="7.5">
         <el-button type="danger" plain round  @click="change(8)"
                    :class="[active === 8 ? 'active' : '']"
                    @touchstart="msDown(8)"
                    @touchend="msUp(8)"
                    style="height: 100px;width: 290px;margin-top: 8px;padding: 0;font-size: 40px">8</el-button>
           </el-col>
           <el-col :span="7.5">
         <el-button type="danger"  plain round  @click="change(9)"
                    :class="[active === 9 ? 'active' : '']"
                    @touchstart="msDown(9)"
                    @touchend="msUp(9)"
                    style="height: 100px;width: 290px;margin-top: 8px;padding: 0;font-size: 40px">9</el-button>
           </el-col>
<!--           <el-col :span="6">-->

<!--           </el-col>-->
         </el-row>

         <el-button type="danger" plain round    @click="change(0)"
                    :class="[active === 0 ? 'active' : '']"
                    @touchstart="msDown(0)"
                    @touchend="msUp(0)"
                    style="height: 100px;width:890px;margin-top: 8px;padding: 0;font-size: 40px">0</el-button>
         </div>
         <div class="right">

           <div class="small">
           <el-button type="danger" plain round     @click="del"
                      style="height: 135px;width: 290px;margin-top: 3px;padding: 0;font-size: 40px">删除</el-button>
           </div>
           <div class="small">
             <el-button type="danger" plain round     @click="del1"
                        style="height: 135px;width: 290px;margin-top: 10px;padding: 0;font-size: 40px">清空</el-button>
           </div>
           <div class="small">
             <el-button type="danger" plain round  @click="comfirm"
                        style="height: 135px;width: 290px;margin-top: 10px;padding: 0;font-size: 40px">确定</el-button>
           </div>
         </div>
       </el-card>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    props: {
      inputName: String,
      required: true
    },
    name: "App",
    data() {
      return {
        active: null,
        show: false,
        NUM: "",
        A:"",
        result: [],
      };
    },
    computed: {
      num: function () {
        return this.result.join("");
      },
    },
    created() {},
    mounted() {
      let _this=this;
    },
    methods: {
      msDown(v) {
        this.active = v;
      },
      msUp(v) {
        this.active = "";
      },
      stopInput() {
        return false;
      },
      change(val, $event) {
        if (this.result.length === 0 && val === ".") {
          return false;
        } else {
          this.result.push(val);
          this.NUM = this.result.join("");
        }
      },
      del() {
        this.result.pop();
        this.NUM = this.result.join("");
        this.$emit("del", this.NUM);
      },
      del1() {
      this.result=[];
      this.NUM='';
      },
      comfirm() {
        this.$emit("comfirm", this.NUM,);
        this.result=[];
        this.NUM='';
        this.show = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .keyboard-wrapper {
    user-select: none;
    input {
      width: 50%;
      height: 100px;
      font-size: 25px;

    }
    .shao{
      height: 990px;
    }
    .shaokeyboard {
      margin-left: 200px;
      position: fixed;
      bottom: 0;
      width: 2500px;
    }

    .left {
      float: left;
      width: 75%;
      height: 100%;

    }
    .right {

      margin-left: 908px;
      height: 427px;
    }
    .shaoinput{
      font-size: 60px;
    }
.shaojianpan{
  width: 100%;
  border: 1px solid #ccc;
  border-collapse: collapse;
  background: #fff;
  height: 450px;
}
      .num {
        margin-left: 5%;
        width: 50%;
        height: 500px;
        align-content: center;
      }
        table {
          width: 60%;
          border: 1px solid #ccc;
          border-collapse: collapse;
          background: #fff;

          td {
            height: 100px;
            vertical-align: middle;
            color: #333;
            font-size: 20px;
            border: 1px solid #ccc;
            text-align: center;

          }
          td.active {
            background: #ccc;
          }
          .del {
            background: #eee;
          }
          .comfirm {
            font-size: 16px;
            width: 80px;
            background: #118eeb;
            color: #fff;
          }
        }

  }
</style>

